| |
|
|
| |
Multiple functions
You often need more than one function to write powerful scripts. A function is called and that function utilizes other functions.
Here is an example...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function SayHi()
{
GetName();
alert("Hello " + myname);
}
function GetName()
{
myname = prompt("What's your name?", "");
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:SayHi()">Click here</A>
</BODY>
</HTML>
|
See what's happening here? The link calls SayHi() which in turn calls GetName(). After GetName() executes, control goes back to SayHi() and the alert box pops up.
Now, there's an important rule that you should know about... a variable declared within a function is only available in that function. A variable declared outside of and before any function is available anywhere.
But, if you look at the function GetName(), you'll see the variable myname is declared, yet it is still used in the function SayHi() in the alert command. How is that? Well, we didn't exactly "declare" myname... we just used it. To actually declare a variable somewhere, you must preceed it with "var". To see the difference, alter the above example by declaring the variable myname within GetName()...
var myname = prompt("What's your name?", "");
Kinda sorta don't work, right? So why did it work before? Because without an actual declaration using "var", the script just assumes it's a global variable (a global variable is a variable available anywhere).
So, why is this important? Why not make ALL variables global? Well, when you get into larger scripts, you'd have to be very careful naming your variables. Actually, you CAN make all variables global. We've been doing it all along. We just have a choice now. You could use a variable named "name" in ten different functions without the script confusing them, or inadvertantly changing their values.
All this talk about multiple functions and golobal vs local variables leads up to a very important concept... reusability. A reusable function is a function that performs a specific task, and is portable to many applications. You write a little snippet that does a certain something and whenever you need that certain something done, you just toss in the function and use it like a little tool.
There's a little piece of reusable code that I reuse all the time. It's my random number generator...
// Random number generator. If max=3 then function returns 1,2 or 3
function getRandom(max) {return (Math.floor(Math.random()*max))+1;}
(It's condensed into one line for ease of use.)
Whenever I want a random number between 1 and something, I simply call getRandom(something). (Needless to say I place this snippet somewhere in the script, usually at or near the top.) If I want a random number between 1 and 100 I call getRandom(100).
Remember a while back we talked about prompt boxes returning a value? Well I made this particular function do just that. Notice the "return" statement? This function is written to return the random number. It doesn't just generate the random number, it actually sends it back to whatever called it.
Consider the following...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
// Random number generator. If max=3 then function returns 1,2 or 3
function getRandom(max) {return (Math.floor(Math.random()*max))+1;}
function GetNumber()
{
mynumber = getRandom(10);
alert(mynumber);
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:GetNumber()">Click here</A>
</BODY>
</HTML>
|
mynumber equals what the function returns. The function returns a random number between 1 and 10, so mynumber equals a random number between 1 and 10.
Understand this concept before you move on.
| << BACK NEXT >> |
|
|
Javascript Reference irt.org/Javascript FAQ Deja Power Search  Joke Break |
|
| Print version available - Get the PageTutor book & CD |
|
 |
|
|
Lifetime Web Hosting